//35.第十步：在count组件中从slice中引入action，在事件函数中用dispatch调用引入的action函数，并传值（代表action中的data）
//35.第十一步：调用useSelector方法，接收一个回调函数作为参数，回调函数的形参就是store中所有reducer组成的对象。通过.count获取到countreducer中的初始值对象，再.count获取到初始值对象中count的值。获取到这个值后，把值给到需要用到这个值的虚拟dom上
//35.第十二步：书写movie中的异步action，在slice文件夹中创建movieSlice.具体写在movieSlice中

import React from 'react'
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from '../../store/slice/countSlice'
export default function Count() {
  const dispacth = useDispatch()
  const count = useSelector(state => state.count.count)
  const movieList = useSelector(state => state.movie.movieList)

  const incrementHandle = () => {
    // console.log(increment);
    dispacth(increment(10))
  }

  const decreamentHandle = () => {
    dispacth(decrement(1))
  }

  const ifOddDecrementHandle = () => {
    if (count % 2 !== 0) {
      dispacth(increment(5))
    }
  }

  const waitDecrementHandle = () => {
  }



  return (
    <div>
      <h1>我是Count组件 我的值是{count}</h1>
      <h2>当前的电影总是数 {movieList.length}</h2>
      <div>
        <button onClick={incrementHandle}>累加</button>
        <button onClick={decreamentHandle}>累减</button>
        <button onClick={ifOddDecrementHandle}>如果是奇数再加1</button>
        <button onClick={waitDecrementHandle}>等2s再加1</button>
      </div>

    </div>
  )
}
